{% assign prefix = page.url | slice: 0, 6 %}

<header class="site-header">
  <div class="site-header__main">
    <button class="site-header__menu-toggle" aria-label="Open Site Menu">
      <svg class="icon">
        <use xlink:href="{{ '/images/icons/icons.svg#icon-menu' | relative_url }}"></use>
      </svg>
    </button>

    <a href="{{ '/' | relative_url }}">
      <img 
        class="site-header__logo"
        src="{{ '/images/openra-logo-with-text.svg' | relative_url }}"
        alt="OpenRA" />
    </a>

    <div class="site-header__menu">
      <button class="site-header__menu-close" aria-label="Open Site Menu">
        <svg class="icon">
          <use xlink:href="{{ '/images/icons/icons.svg#icon-x' | relative_url }}"></use>
        </svg>
      </button>

      <nav class="site-header__nav">
        <a class="site-header__nav__link{% if prefix == '/news/' %} is-active{% endif %}" href="{{ '/news/' | relative_url }}" tabindex="0">新闻</a>
        <a class="site-header__nav__link{% if page.url == '/about/' %} is-active{% endif %}" href="{{ '/about/' | relative_url }}" tabindex="0">关于</a>
        <a class="site-header__nav__link{% if page.url == '/download/' %} is-active{% endif %}" href="{{ '/download/' | relative_url }}" tabindex="0">下载</a>
        <a class="site-header__nav__link{% if page.url == '/community/' %} is-active{% endif %}" href="{{ '/community/' | relative_url }}" tabindex="0">国内社群</a>
        <a class="site-header__nav__link" href="https://www.openra.net/" tabindex="0">
          英文官网
          <svg class="icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-external-link' | relative_url }}"></use>
          </svg>
        </a>
        <a class="site-header__nav__link" href="https://resource.openra.net" tabindex="0">
          资源库
          <svg class="icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-external-link' | relative_url }}"></use>
          </svg>
        </a>
        <a class="site-header__nav__link" href="https://wiki.biligame.com/openra/" tabindex="0">
          中文wiki
          <svg class="icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-external-link' | relative_url }}"></use>
          </svg>
        </a>
      </nav>

      <nav class="site-header__social-nav">
        <div class="site-header__social-nav__row">
          <a class="site-header__social-nav__link" href="https://github.com/OpenRA/OpenRA" tabindex="0">
            <span class="text--hidden">GitHub</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-github' | relative_url }}"></use>
            </svg>
          </a>
          <a class="site-header__social-nav__link" href="https://discord.openra.net/" tabindex="0">
            <span class="text--hidden">Discord</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-discord' | relative_url }}"></use>
            </svg>
          </a>
          <a class="site-header__social-nav__link" href="https://openra.itch.io/openra" tabindex="0">
            <span class="text--hidden">Itch</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-itch' | relative_url }}"></use>
            </svg>
          </a>
          <a class="site-header__social-nav__link" href="https://www.facebook.com/openra" tabindex="0">
            <span class="text--hidden">Facebook</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-facebook' | relative_url }}"></use>
            </svg>
          </a>
        </div>
        <div class="site-header__social-nav__row">
          <a class="site-header__social-nav__link" href="https://twitter.com/openRA" tabindex="0">
            <span class="text--hidden">Twitter</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-twitter' | relative_url }}"></use>
            </svg>
          </a>
          <a class="site-header__social-nav__link" href="https://www.reddit.com/r/openra" tabindex="0">
            <span class="text--hidden">Reddit</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-reddit' | relative_url }}"></use>
            </svg>
          </a>
          <a class="site-header__social-nav__link" href="https://www.youtube.com/channel/UCRoiPL1J4K1-EhQeNazrYig" tabindex="0">
            <span class="text--hidden">YouTube</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-youtube' | relative_url }}"></use>
            </svg>
          </a>
          <a class="site-header__social-nav__link" href="https://steamcommunity.com/groups/openra/" tabindex="0">
            <span class="text--hidden">Steam</span>
            <svg class="icon">
              <use xlink:href="{{ '/images/icons/icons.svg#icon-steam' | relative_url }}"></use>
            </svg>
          </a>
        </div>
      </nav>
    </div>
  </div>

  <hr class="site-header__hr" />
  
</header>
